<template>
	<MyDialog v-model="show" title="分组方案" :slot-show="false">
		<el-form>
			<el-form-item>
				<el-button type="primary" @click="createContent">新建分组方案</el-button>
			</el-form-item>
		</el-form>

		<el-table :data="studentGroupList">
			<el-table-column type="index"></el-table-column>
			<el-table-column prop="groupName" label="分组方案名称" width="200"></el-table-column>
			<el-table-column label="操作" width="160">
				<template #default="scope">
					<el-dropdown placement="top-start">
						<el-button plain size="small">其它操作</el-button>
						<template #dropdown>
							<el-dropdown-menu>
								<el-dropdown-item v-for="item in settings.commonActions"
									@click="clickSommonSelect(item,scope.row)">{{item.name}}</el-dropdown-item>
							</el-dropdown-menu>
						</template>
					</el-dropdown>
				</template>
			</el-table-column>
		</el-table>


		<!-- 		<div class="view-content-style" style="min-height: 10px;"
			:style="{backgroundColor: styleObject.pageContentBackgroundColor}"> -->
		<!-- 			<u-cell-group>
				<u-cell :title="(index+1)+'、'+item.groupName" isLink v-for="(item,index) in studentGroupList"
					@click="clickCommon(item)">
				</u-cell>
			</u-cell-group> -->
		<!-- </div> -->

		<!-- 		<u-action-sheet :show="settings.commonActionSheetShow" @close="settings.commonActionSheetShow = false"
			:actions="settings.commonActions" cancelText="取消" @select="clickSommonSelect">
		</u-action-sheet> -->
		<el-pagination v-model:current-page="pageData.current" v-model:page-size="pageData.size" :total="pageData.total"
			:page-sizes="[10, 20, 30, 40]" @size-change="handleSizeChange" @current-change="handleCurrentChange"
			layout="total, sizes, prev, pager, next, jumper">
		</el-pagination>

		<StudentGroupDetail v-if="studentGroupDetailShow" @close="studentGroupDetailShow = false" ref="studentGroupDetail">
		</StudentGroupDetail>

	</MyDialog>
</template>

<script>
	import myMixin from '@/utils/myMixin.js'
	import MyDialog from '@/components/MyDialog.vue'
	import StudentGroupDetail from './StudentGroupDetail.vue'
	import {
		nextTick
	} from 'vue';
	var that;
	export default {
		mixins: [myMixin], //混入
		components: {
			MyDialog,
			StudentGroupDetail
		},
		data() {
			return {
				studentGroupDetailShow: false,
				show: true,
				id: '',
				classNameId: '',
				studentGroupList: [],
				settings: {
					commonActionSheetShow: false,
					commonActions: [{
							name: '编辑分组方案',
						},
						{
							name: '删除分组',
						}
					],
				},
			}
		},
		mounted() {
			that = this;
			// that.classNameId = option.classNameId;
		},
		watch: {
			show(news) {
				this.$emit("close")
			},
			classNameId(news) {
				if (news) {
					this.getData()
				}

			}
		},
		methods: {
			//当前页数据显示条数变化
			handleSizeChange(size) {
				this.pageData.size = size;
				this.getData();
			},
			//当前页数变化
			handleCurrentChange(current) {
				this.pageData.current = current;
				this.getData();
			},
			createContent() {
				that.studentGroupDetailShow = true;
				nextTick(() => {
					that.$refs["studentGroupDetail"].classNameId = that.classNameId;
					that.$refs["studentGroupDetail"].studentGroupId = "";
				})

				// uni.navigateTo({
				// 	url: '/pagesAttendClass/studentGroupDetail/studentGroupDetail?studentGroupId=' + "&classNameId=" + that
				// 		.classNameId
				// })
			},
			async getData() {
				const data = await that.$asyncHttpConfig({
					url: "/studentGroup/selectList",
					data: {
						classNameId: that.classNameId,
						...that.pageData
					}
				})

				that.studentGroupList = data.studentGroupList;
				//分页
				that.pageData.total = data.total;
			},
			async clickSommonSelect(index, row) {
				that.clickCommon(row);

				let name = index.name;
				if (name == '编辑分组方案') {
					that.studentGroupDetailShow = true;
					nextTick(() => {
						that.$refs["studentGroupDetail"].classNameId = that.classNameId;
						that.$refs["studentGroupDetail"].studentGroupId = that.id;
					})
					// uni.navigateTo({
					// 	url: '/pagesAttendClass/studentGroupDetail/studentGroupDetail?studentGroupId=' + that.id +
					// 		"&classNameId=" + that.classNameId
					// })

				} else if (name == '删除分组') {
					//获取班级信息
					const res = await that.$asyncHttpConfig({
						url: "/studentGroup/removeById",
						data: {
							id: that.id
						}
					})
					//还原到第一页
					that.restoreFirst();
					that.studentGroupList = [];
					that.getData();
				}

			},
			clickCommon(item) {
				that.id = item.id;
				// that.settings.commonActionSheetShow = true;
			}
		}
	}
</script>

<style>
</style>